<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta name="misapplication-tap-highlight" content="no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>课堂回课</title>

		<link rel="stylesheet" href="../css/base.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
        <link href="../css/layer.css" rel="stylesheet" />
		<style>
			.width {
				width: 100%;
			}
			
			.span1 {
				color: #2cc7fd;
				font-size: larger;
			}
			
			.span2 {
				color: #a3a3a3;
				font-size: small;
			}
			
			.span3 {
				font-size: x-larger;
			}
			
			.margin-5px {
				margin-top: 5px;
			}
			
			.img1 {
				width: 50px;
				margin: 10px;
			}
			
			.img2 {
				margin-left: 5px;
				width: 100px;
				height: 100px;
			}
			
			.div1 {
				padding: 5px;
				margin-top: 10px;
			}
			
			.div2 {
				width: 100px;
				height: 100px;
				background-image: url(../img/bg-01.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			
			.div3 {
				height: 100%;
				background: #a3a3a3;
				filter: alpha(Opacity=60);
				-moz-opacity: 0.3;
				opacity: 0.3;
			}
			
			.div4 {
				background-image: url(../img/play-2.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 70px;
				height: 70px;
				margin: 0 auto;
				text-align: center;
			}
			
			.button1 {
				background-color: #00d5c5;
				float: right;
				color: #EEEEEE;
				width: 80px;
			}
			
			.magin-120 {
				margin-top: 120%;
			}
			
			.width-30 {
				width: 30px;
			}
			.float-button {
		         position: fixed;  //关键	         
		         width: 50px;
		         bottom: 50px;
		         right: 30px;	       
		         z-index: 2;         
		     }
		</style>

	</head>
	

	<body>
		<div class="mui-content">
			<div class="flex h-center div1">
				<div class="flex-1">
					<img class="width" src="../img/head-01.png" />

				</div>
				<div class="flex-4">
					<div>
						<span class="span1">王大珂</span>
						<span class="span2">3小时前</span>
					</div>
					<div class="margin-5px">
						<span class="span3">贝多芬的悲伤</span>
					</div>
					<div id="id1" class="flex margin-5px">
						<div class="flex-1 div2">
							<div class="flex v-center width div3">
								<div class="div4">
									<img class="img1" src="../img/play-1.png" />
								</div>
							</div>
						</div>
						<img class="flex-1 img2" src="../img/bg-02.png" />
					</div>

				</div>
				<div class="flex-2">

					<button type="button" class="mui-btn mui-btn-outlined span3 button1">打赏</button>

					<div class="flex magin-120">
						<div id="comment" class="flex-1">
							<img class="width-30" src="../img/icon-messages.png" />
						</div>
						<div class="flex-1">
							<img class="width-30" src="../img/icon-collect.png" />
						</div>
						<div class="flex-1" onclick="onShare()">
							<img class="width-30" src="../img/icon-share.png" />
						</div>
					</div>
				</div>

			</div>
			<!--第二种样式-->
			<div class="flex h-center div1">
				<div class="flex-1">
					<img class="width" src="../img/head-01.png" />

				</div>
				<div class="flex-4">
					<div>
						<span class="span1">王大珂</span>
						<span class="span2">3小时前</span>
					</div>
					<div class="margin-5px">
						<span class="span3">贝多芬的悲伤</span>
					</div>
					<div id="id2" class="flex margin-5px">
						<div class="flex-1 div2">
							<div class="flex v-center width div3">
								<div class="div4">
									<img class="img1" src="../img/play-1.png" />
								</div>
							</div>
						</div>
						<img class="flex-1 img2" src="../img/bg-02.png" />
					</div>

					<div class="flex v-center width" style="height: 30px;">
						<img class="width-30" src="../img/icon-star.png" />
						<span>钢琴家</span>
						<span class="yellow">+ 5</span>

					</div>
					<div class="flex v-center width" style="font-size: 15px;">

						<li style="list-style:none;">
							<span class="blue">钢琴家:</span>
							<span class="gray">还不错,继续努力哦!</span>

						</li>

					</div>

				</div>
				<div class="flex-2">

					<button type="button" class="mui-btn mui-btn-outlined span3 button1">打赏</button>

					<div class="flex magin-120">
						<div class="flex-1">
							<img class="width-30" src="../img/icon-messages.png" />
						</div>
						<div class="flex-1">
							<img class="width-30" src="../img/icon-collect.png" />
						</div>
						<div class="flex-1">
							<img class="width-30" src="../img/icon-share.png" />
						</div>
					</div>
				</div>
			</div>
		
		
		<!--第二种样式-->
			<div class="flex h-center div1">
				<div class="flex-1">
					<img class="width" src="../img/head-01.png" />

				</div>
				<div class="flex-4">
					<div>
						<span class="span1">王大珂</span>
						<span class="span2">3小时前</span>
					</div>
					<div class="margin-5px">
						<span class="span3">贝多芬的悲伤</span>
					</div>
					<div id="id2" class="flex margin-5px">
						<div class="flex-1 div2">
							<div class="flex v-center width div3">
								<div class="div4">
									<img class="img1" src="../img/play-1.png" />
								</div>
							</div>
						</div>
						<img class="flex-1 img2" src="../img/bg-02.png" />
					</div>

					<div class="flex v-center width" style="height: 30px;">
						<img class="width-30" src="../img/icon-star.png" />
						<span>钢琴家</span>
						<span class="yellow">+ 5</span>

					</div>
					<div class="flex v-center width" style="font-size: 15px;">

						<li style="list-style:none;">
							<span class="blue">钢琴家:</span>
							<span class="gray">还不错,继续努力哦!</span>

						</li>

					</div>

				</div>
				<div class="flex-2">

					<button type="button" class="mui-btn mui-btn-outlined span3 button1">打赏</button>

					<div class="flex magin-120">
						<div class="flex-1">
							<img class="width-30" src="../img/icon-messages.png" />
						</div>
						<div class="flex-1">
							<img class="width-30" src="../img/icon-collect.png" />
						</div>
						<div class="flex-1">
							<img class="width-30" src="../img/icon-share.png" />
						</div>
					</div>
				</div>
			</div>
			
			
			<div class="float-button" onclick="issue()"> 
         
		       <img style="width: 70px;" src="../img/button-add.png"/>
		 
		    </div>
		</div>
		
		
		
		
		
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script src="..js/local-keys.js"></script>
		<script src="../js/utils.js"></script>
		<script type="text/javascript" src="../js/sub-right.js"></script>
		<script src="../js/layer.js"></script>
		<script>
			mui.init();

			document.getElementById("id1").addEventListener('tap', function() {
				mui.openWindow({
					url: 'classroom-particulars.html',
				});
			});
			document.getElementById("id2").addEventListener('tap', function() {
				mui.openWindow({
					url: 'classroom-particulars.html',
				});
			});
			
			document.getElementById("comment").addEventListener('tap', function(e) {
				printLog("点击了评论");
				e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
				var btnArray = ['取消', '确定'];
				
				mui.prompt('请输入您的评语', '请输入...', btnArray, function(e) {
					
					if (e.index == 1) {
					//	info.innerText = '谢谢你的评语：' + e.value;
					    printLog(e.value);
					} else {
						printLog("取消了");
						//info.innerText = '你点了取消按钮';
					}
				})
			});
			
			//上传视频
			function issue(){
					
					mui.openWindow({
					     url: "classroom-issue.html"
					
				   
			         });
				
				
			}

			//分享的方法
			function onShare() {
				printLog("点击了分享");
                 //event.preventDefault(); 
                 //document.body.style.overflow = "hidden";
                 //document.getElementById("dialog").style.visibility = "visible";
				//event.preventDefault();
				layerOpen({    //打开弹窗
					"title":"",
					"content":'<div style="width: 100%;text-align: center;margin: 0 auto;border-radius: 5px;"><span id="h3_close" class="mui-icon mui-icon-closeempty"style="float: right;"></span><br /><h4 >分享</h4><img style="width: 100%;" src="../img/icon-segmentation.png" /><div style="display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;"><div style="flex: 1;-webkit-flex: 1;"><img style="width: 60px;"  src="../img/share-friend.png"/><div>好友</div></div><div style="flex: 1;-webkit-flex: 1;"><img style="width: 60px;"  src="../img/share-interspace.png"/><div>朋友圈</div></div></div></div>',
				});
				var h3_close=document.getElementById("h3_close");
				h3_close.addEventListener("tap",function () {
					//手动关闭对话框
					layerClose();
				});
			
			
			
			}
		</script>
	</body>

</html>